<template>
  <el-aside class="sidebar" :width="isCollapse ? '64px' : '220px'">
    <!-- 新增收起打开侧边栏按钮 -->
    <div class="logo-container" @click="toggleCollapse">
      <h1 v-if="!isCollapse" class="logo-text">ManageSystem</h1>
      <el-icon :size="24">
        <Expand v-if="isCollapse" />
        <Fold v-else />
      </el-icon>
    </div>
    <el-menu class="el-menu-vertical-demo" background-color="#2d3a4b" text-color="#f9f9f9" active-text-color="#3f28be"
      :default-active="routeStore.activeMenu" router :collapse="isCollapse">
      <el-menu-item v-for="item in menuItems" :key="item.path" :index="item.path">
        <el-icon>
          <component :is="item.icon" />
        </el-icon>
        <span>{{ item.label }}</span>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script setup>

import { ref, watch } from 'vue';
import { ElMenu, ElMenuItem, ElIcon } from 'element-plus';
import {
  User as ElIconUser,
  Fold,
  Expand,
  UserFilled as ElIconUserFilled,
  Setting as ElIconSetting,
  Lock as ElIconLock,
  Document as ElIconDocument,
  DocumentCopy as ElIconDocumentCopy,
  Folder as ElIconFolder,
  Stopwatch as Stopwatch,
  Menu as Menu
} from '@element-plus/icons-vue';
import { useRouteStore } from '@/stores/router';

const menuItems = [
  {
    path: '/dashboard',
    label: '仪表盘',
    icon: Stopwatch,
  },
  {
    path: '/users',
    label: '用户管理',
    icon: ElIconUser,
  },
  {
    path: '/roles',
    label: '角色管理',
    icon: ElIconUserFilled,
  },
  {
    path: '/menus',
    label: '菜单管理',
    icon: Menu,
  },
  {
    path: '/system',
    label: '系统设置',
    icon: ElIconSetting,
  },
  {
    path: '/logs',
    label: '日志管理',
    icon: ElIconDocument,
  },
  {
    path: '/article',
    label: '文章管理',
    icon: ElIconDocumentCopy,
  },
  {
    path: '/file',
    label: '文件管理',
    icon: ElIconFolder,
  },
];
//pinia管理路由状态
const routeStore = useRouteStore();
watch(() => routeStore.activeMenu, (newMenu) => {
  routeStore.activeMenu = newMenu;
});
const props = defineProps({
  isCollapse: {
    type: Boolean,
    required: true
  }
});

const emit = defineEmits(['toggle-collapse']);

const toggleCollapse = () => {
  emit('toggle-collapse');
};
</script>

<style scoped>
.sidebar {
  background: #6dacff;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 0;
  color: rgb(0, 79, 198);
  cursor: pointer;
}

.logo-text {
  margin-left: 10px;
  font-size: 22px;
  font-weight: 500;
}

:deep(.el-menu) {
  border-right: none;
}

/* el-menu样式微调 */
.el-menu-vertical-demo {
  border-right: none;
  background: #6dacff;
  min-height: 100vh;
}

.el-menu-item:hover {
  background-color: rgb(76 134 215);
}

.el-menu-item {
  font-size: 16px;
  height: 48px;
  display: flex;
  align-items: center;
}

.el-menu-item .el-icon {
  margin-right: 10px;
}
</style>
